<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>20210340910-郭俊严</title>
    <script src="./js/vue.global.js"></script>
</head>
<style>
    body{
        margin: 0;
        padding: 0;
    }
    #app {
        display: flex;
        justify-content: center;
    }
    .left{
        margin-left: 30px;
    }
</style>

<body>
    <div id="app">
        <table>
            <tr>
                <td>姓名：</td>
                <td>
                    <input type="text" v-model="name">
                </td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <label for="man">男
                        <input type="radio" name="" id="man" value="男" v-model="sex">
                    </label>
                    <label for="woman">女
                        <input type="radio" name="" id="woman" value="女" v-model="sex">
                    </label>
                </td>
            </tr>
            <tr>
                <td>爱好：</td>
                <td>
                    <label for="">
                        <input type="checkbox" name="" id="" value="运动" v-model="lover">
                        运动</label>
                    <label for="">
                        <input type="checkbox" name="" id="" value="画画" v-model="lover">
                        画画</label>
                    <label for="">
                        <input type="checkbox" name="" id="" value="游戏" v-model="lover">
                        游戏</label>
                    <label for="">
                        <input type="checkbox" name="" id="" value="读书" v-model="lover">
                        读书</label>
                </td>
            </tr>
            <tr>
                <td>职业：</td>
                <td>
                    <select name="" id="" multiple v-model="pro">
                        <option value="学生">学生</option>
                        <option value="职员">职员</option>
                        <option value="保安">保安</option>
                        <option value="运动员">运动员</option>
                        <option value="公务员">公务员</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>个人简介：</td>
                <td>
                    <textarea name="" id="" v-model="info" cols="30" rows="10"></textarea>
                </td>
            </tr>
            <tr>
                <td>城市：</td>
                <td>
                    <select name="" id="" v-model="city">
                        <option value="北京">北京</option>
                        <option value="深圳">深圳</option>
                        <option value="上海">上海</option>
                        <option value="厦门">厦门</option>
                        <option value="珠海">珠海</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <label for="agr">
                        <input type="checkbox" name="" v-model="isAgree" id="agr">
                        同意
                    </label>
                    <button :disabled="!isAgree" @click="isShow='true'">提交</button>
                </td>
            </tr>
        </table>
        <div class="left">
            <template v-if="isShow">
            <h1>您的个人信息是：</h1>
            <h2>用户名：{{name}}</h2>
            <h2>性别：{{sex}}</h2>
            <h2>爱好：{{lover}}</h2>
            <h2>职业：{{pro}}</h2>
            <h2>个人简介：{{info}}</h2>
            <h2>城市：{{city}}</h2>
            </template>
        </div>
    </div>
</body>
<script>
    Vue.createApp({
        data() {
            return {
                name: '',
                sex: '',
                lover: [],
                pro: [],
                info: '',
                city: '',
                isAgree:false,
                isShow:false
            }
        }
    }).mount('#app')
</script>
</html>